<template>
  <view class="container">
    <view>
      <view v-for="item in list" :key="item.year">
        <view class="year_month">{{ item.year }}</view>
        <view v-for="record in item.record" :key="record.date" class="itemRecord">
          <view>
            <view class="way">{{ record.way }}</view>
            <view class="date">{{ record.date }}</view>
          </view>
          <view>
            <view class="amount">{{ record.amount }}</view>
            <view :class="{statuswait:record.value === 'wait',statusfail:record.value === 'fail',statussuccess:record.value === 'success'}">{{ record.status }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Picker/>
</template>

<script setup>

const list = [
  {
    year: '2023-11',
    record: [
      {
        way: '提现到银行卡',
        date: '2023/11/16 12:01:23',
        amount: '-1000',
        status: '待审核',
        value: 'wait'
      },
      {
        way: '提现到银行卡',
        date: '2023/11/16 12:01:23',
        amount: '-1000',
        status: '提现成功',
        value: 'success'
      },
      {
        way: '提现到银行卡',
        date: '2023/11/16 12:01:23',
        amount: '-1000',
        status: '提现失败：与银行预留信息不一致',
        value: 'fail'
      }
    ]
  },
  {
    year: '2023-10',
    record: [
      {
        way: '提现到银行卡',
        date: '2023/10/16 12:01:23',
        amount: '-1000',
        status: '待审核',
        value: 'wait'
      },
      {
        way: '提现到银行卡',
        date: '2023/10/16 12:01:23',
        amount: '-1000',
        status: '提现成功',
        value: 'success'
      },
      {
        way: '提现到银行卡',
        date: '2023/10/16 12:01:23',
        amount: '-1000',
        status: '提现失败：与银行预留信息不一致',
        value: 'fail'
      }
    ]
  }
]
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
	background: $body-bc;
	color: $content-color;
  padding: 28rpx;
  .year_month {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 26rpx;
    color: #3A75C0;
    line-height: 50rpx;
    margin-bottom: 28rpx;
  }
  .itemRecord {
    background: #112959;
    box-shadow: 0rpx 10rpx 17rpx 1rpx rgba(0,14,41,0.3);
    border-radius: 15rpx;
    margin-bottom: 22rpx;
    padding: 38rpx 35rpx 38rpx 31rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .way {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 30rpx;
    color: #00C1FF;
    line-height: 50rpx;
  }
  .date {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 24rpx;
    color: #3A75C0;
    line-height: 50rpx;
  }
  .amount {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 36rpx;
    color: #DE8300;
    line-height: 50rpx;
    text-align: end;
  }
  .statussuccess {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 24rpx;
    color: #00C1FF;
    line-height: 50rpx;
    text-align: end;
  }
  .statusfail {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 24rpx;
    color: #DE8300;
    line-height: 50rpx;
    text-align: end;
  }
  .statuswait {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 50rpx;
    text-align: end;
  }
}
</style>
